<template>
  <div
    :layout="layoutBase"
    :widget="props.widget"
    :propsStyle="props.componentStyle"
    v-bind="$attrs"
  />
</template>

<script setup>
import {
  defineOptions,
  ref,
  watch,
  defineEmits,
  onMounted,
  defineProps,
} from "vue";

defineOptions({
  name: "GridContainer",
});

const props = defineProps({
  layout: {
    type: Object,
    default: () => {},
  },
  widget: {
    type: Object,
    default: () => {},
  },
  componentStyle: {
    type: Object,
    default: () => {},
  },
});

const emits = defineEmits(["updateLayoutAreas", "noItemClick"]);

const layoutBase = ref(null);

const _base = {
  areas: [
    ["g-header-0", "g-header-1"],
    ["g-left", "g-main"],
  ],
  columns: ["20fr", "20fr"],
  rows: ["60px", "60px"],
};
// 由于可能被多次使用，所以每次生成都需要重新生成areas，避免重复
if (props.layout) {
  // 已经存在布局数据
  layoutBase.value = props.layout;
}

onMounted(() => {
  if (props.layout) {
    layoutBase.value = props.layout;
  }
});

watch(
  () => layoutBase.value,
  (newLayout) => {
    // 立即更新layout属性
    emits("updateLayoutAreas", newLayout);
  },
  {
    immediate: true,
    deep: true,
  }
);
</script>
